<template>
  <common-page :title="title">
    <el-button slot="header" @click="back">返 回</el-button>
    <TraceabilityTask
      v-if="openTask"
      @traceabilityTaskView="traceabilityTaskView"
      :id="taskId"
      :data="formData"
    >
    </TraceabilityTask>
    <common-list slot="content" v-else>
      <common-search slot="search" @search="handleQuery" @reset="resetQuery">
        <el-form
          @submit.native.prevent
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="70px"
        >
          <el-form-item label="执行时间" prop="time">
            <el-date-picker
              type="datetimerange"
              range-separator="至"
              v-model="queryParams.time"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="tiemChange(queryParams.time)"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </common-search>
      <common-table slot="content" v-loading="loading" :data="list">
        <el-table-column
          label="任务名称"
          align="left"
          prop="jobName"
          show-overflow-tooltip
        />
        <el-table-column
          label="执行开始时间"
          align="left"
          prop="startTime"
          show-overflow-tooltip
        />
        <el-table-column
          label="执行结束时间"
          align="left"
          prop="stopTime"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="状态" align="left" prop show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status == 0">正常</el-tag>
            <el-tag type="danger" v-else-if="scope.row.status == 1"
              >暂停</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column label="操作" align="left" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="previewReport(scope.row)">
              查看报告
            </el-button>
          </template>
        </el-table-column>
      </common-table>
      <pagination
        slot="pagination"
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </common-list>
  </common-page>
</template>

<script>
import { traceReportList } from "@/api/apisecurity/apitraceability/traceability";
import TraceabilityTask from "../../traceabilityTask";
export default {
  name: "TraceabilityHistory",
  components: { TraceabilityTask },
  props: {
    formData: {
      type: Object,
      default: null,
    },
    name: {
      type: String,
    },
  },
  data() {
    return {
      openTask: false,
      title: "执行历史",
      list: [],
      total: 0,

      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        jobName: this.name,
      },
      taskId: null,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    tiemChange(row) {
      this.queryParams.beginTime = row[0];
      this.queryParams.endTime = row[1];
    },
    previewReport(row) {
      console.log("row: ", row);
      this.openTask = true;
      this.taskId = row.jobReportId;
    },
    traceabilityTaskView() {
      this.openTask = false;
    },
    getList() {
      this.loading = true;
      traceReportList(this.queryParams)
        .then((res) => {
          if (res && res.code === 200) {
            console.log(res);
            this.loading = false;
            this.list = res.rows;
            this.total = res.total;
          } else {
            this.list = [];
            this.total = 0;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList();
    },
    resetQuery() {
      this.queryParams = this.$options.data().queryParams;
      this.queryParams.endTime = "";
      this.queryParams.beginTime = "";
      this.queryParams.time = [];
    },
    back() {
      this.$emit("changeTraceabilityHistoryDiv");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
